<template>
  <div id="root">
    <div> </div>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <div id="root-table">
          <el-table
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column
              label="日期"
              prop="created"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="文件名"
              prop="name"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="描述"
              prop="desc">
            </el-table-column>
            <el-table-column
              align="right"
              width="250"
            >
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">预览
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="downloadfile(scope.$index, scope.row)">下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>

      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

<!--    <el-dialog-->
<!--      title="提示"-->
<!--      style="text-align: left;overflow: auto;height: 600px"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="70%"-->
<!--    >-->
<!--      &lt;!&ndash;      <div v-html="words"></div>&ndash;&gt;-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false" type="success">关闭</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->

  </div>
</template>

<script>

  export default {
    name: 'CompanyFileView',
    data () {
      return {
        pdf_url:'',
        dialogVisible: false,
        words: '',
        download_url: '',
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        tableData: [],
        search: ''
      }
    },
    mounted () {
      this.get_data()
      this.download_url = this.$settings.base_url + '/user/downloadfile/'
    },
    methods: {
      handleEdit (index, row) {

        this.$axios({
          url: this.$settings.base_url + `/user/word/?id=${row.id}`,
          mothod: 'get'
        }).then(res => {
          if (res.data.code === 500) {
            this.$message.warning('无法预览，请下载')
          } else {
            this.pdf_url = res.data.url
            window.open(this.pdf_url, '_blank');
            // console.log(this.pdf_url)
            // //拿到标签数据
            // this.words = res.data.data
            // this.dialogVisible = true
          }
        }).catch(error => {
          this.$message.warning('无法预览，请下载')
          console.log(error)
        })
      }
      ,
      handleDelete (index, row) {
        console.log(index, row)
      },

      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/companyfile/?page=${page}`,
          method: 'get',
        }).then(res => {
          //获取到用户信息，赋值给变量
          this.tableData = res.data.results
          // this.prev = res.data.links.previous
          // this.next = res.data.links.next
          this.total = res.data.count
          this.page_size = res.data.page_size
        })
      },
      downloadfile (index, row) {
        var arr = row.filename.split('.')
        var file_type = arr[arr.length - 1]//获取文件的格式
        this.$axios({
          method: 'get', // 如果是get方法，则写“GET”
          url: this.download_url + `?id=${row.id}`,
          responseType: 'blob'
        })
          .then(res => {

            let blob = new Blob([res.data], {
              type: 'application/msword' //这里需要根据不同的文件格式写不同的参数
            })

            let eLink = document.createElement('a')
            eLink.download = `${row.name}.${file_type}` //给文件名和指定格式
            eLink.style.display = 'none'
            eLink.href = URL.createObjectURL(blob)
            document.body.appendChild(eLink)
            eLink.click()
            URL.revokeObjectURL(eLink.href)
            document.body.removeChild(eLink)
          })
          .catch(err => {
          })
      },

      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)

      },
    }
  }
</script>

<style scoped>
  #root {
    text-align: center;
  }

  .root-top {
    height: 580px;
    width: 780px;

  }

  #root-table {
    margin-top: 50px;
    height: 400px;
  }

</style>
